<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>
    <link rel="stylesheet" href="../css/layui.css">
    <link rel="stylesheet" type="text/css" href="../css/register.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <script src="../javascript/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../javascript/layui.js"></script>
    <script>
        <!-- 定义全局变量 -->
        var Jshop_Host = window.location.host;
        var Jshop_Image = "/manage/images/uploadimage.html";
    </script>
    <script src="../javascript/jshop.js"></script>


    <style>
        .black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=88);
        }
        .white_content {
            display: none;
            position: absolute;
            top: 7%;
            left: 25%;
            width: 35%;
            height: 75%;
            padding: 20px;
            border: 10px solid orange;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }
        #light{
            line-height: 50px;

        }
    </style>
</head>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">

        <div class="state">
            为确保您账户的安全及正常使用，依《网络安全法》相关要求，会员账户需绑定手机。
        </div>
    </div>
</div>
<div class="mini-content">
    <div class="login-content-l"></div>
    <div class="login-content">
        <div class="login-content-mid">
            <div class="layui-container">
                <div>
                    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                        <h3 class="login-header">登录</h3>
                        <div class="layui-tab-item layui-show">
                            <div class="layui-tab-content layui-form-pane">
                                <form class="layui-form" action="/login" method="post">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">账号：</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="username" id="username" lay-verify="required" autocomplete="off" class="layui-input" value="">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">密码：</label>
                                        <div class="layui-input-inline">
                                            <input type="password" name="password" id="pwds" autocomplete="off" class="layui-input" value="">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <div class="layui-input-inline" style="text-align: center">
                                            <label style="color: red" th:if="${param.error}" th:text="用户名或者密码错误"></label>
                                            <input class="layui-btn layui-btn-fluid" lay-submit lay-filter="password_login" type="submit" value="登录" id="logining"/><br><br>
                                            <input class="layui-btn layui-btn-fluid" type="button" value="人脸对比登录" style="text-align: center" onclick = "openDialog()">
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="login-content-r"></div>

</div>
<div class="login-footer">
    <div class="w">
        <div id="footer-2013">
            <div class="links">
                <a rel="nofollow" href="" target="_blank">
                    关于我们
                </a>
                |
                <a rel="nofollow" href="" target="_blank">
                    联系我们
                </a>
                |
                <a rel="nofollow"  href="" target="_blank">
                    人才招聘
                </a>
                |
                <a rel="nofollow"  href="" target="_blank">
                    商家入驻
                </a>
                |
                <a  href="" target="_blank">
                    友情链接
                </a>
                |
                <a  href="" target="_blank">
                    销售联盟
                </a>
            </div>

        </div>
    </div>
</div>


<div id="light" class="white_content" style="text-align: center">
    <button id="take" style="display: none">拍照</button>
    <button onClick="saveFile(filename);" type="button" id="que" style="display: none">确定</button>
            <video id="v" style="width: 450px;height: 300px;"></video><br>
        请输入登录名：<input style="width: 300px;padding: 5px" type="text" name="img" id="imgs" required placeholder="请输入正确的登录名">
    <div style="text-align: center">
        <button type="button" class="layui-btn layui-btn-fluid" id="yes">确定</button>
        <button type="button" class="layui-btn layui-btn-fluid" id="sub" style="display:none;" >人脸对比</button>
    </div>
        <canvas id="canvas" style="display:none;"></canvas>
        <img src="" id="photo" alt="photo" style="display:none;"/>
        <img src="" id="img" style="display:none;">
    <a href = "javascript:void(0)" onclick = "closeDialog()">点这里关闭本窗口</a>

</div>
<div id="fade" class="black_overlay"></div>
</body>
<script type="text/javascript">
    $(function(){
    });
    function openDialog(){
        document.getElementById('light').style.display='block';
        document.getElementById('fade').style.display='block'
    }
    function closeDialog(){
        document.getElementById('light').style.display='none';
        document.getElementById('fade').style.display='none'
        location.href="/";
    }
</script>


<script>
    !(function () {
        // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
        if (navigator.mediaDevices === undefined) {
            navigator.mediaDevices = {};
        }
        if (navigator.mediaDevices.getUserMedia === undefined) {
            navigator.mediaDevices.getUserMedia = function (constraints) {
                // 首先，如果有getUserMedia的话，就获得它
                var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

                // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
                if (!getUserMedia) {
                    return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
                }

                // 否则，为老的navigator.getUserMedia方法包裹一个Promise
                return new Promise(function (resolve, reject) {
                    getUserMedia.call(navigator, constraints, resolve, reject);
                });
            }
        }
        const constraints = {
            video: true,
            audio: false
        };
        let videoPlaying = false;
        let v = document.getElementById('v');
        let promise = navigator.mediaDevices.getUserMedia(constraints);
        promise.then(stream => {
            // 旧的浏览器可能没有srcObject
            if ("srcObject" in v) {
            v.srcObject = stream;
        } else {
            // 防止再新的浏览器里使用它，应为它已经不再支持了
            v.src = window.URL.createObjectURL(stream);
        }
        v.onloadedmetadata = function (e) {
            v.play();
            videoPlaying = true;
        };
    }).catch(err => {
            console.error(err.name + ": " + err.message);
    })
        document.getElementById('take').addEventListener('click', function () {
            if (videoPlaying) {
                let canvas = document.getElementById('canvas');
                canvas.width = v.videoWidth;
                canvas.height = v.videoHeight;
                canvas.getContext('2d').drawImage(v, 0, 0);
                let data = canvas.toDataURL('image/webp');
                document.getElementById('photo').setAttribute('src', data);
            }
        }, false);
    })();
</script>

<script th:src="@{/webjars/jquery/3.3.1/jquery.min.js}"></script>
<script type="text/javascript">
    $("#yes").click(function () {
        var name=$("[name=img]").val();
        if(name=="") {
            alert("请填写登录名");
        }
    })

    $("[name=img]").blur(function () {
        var name=$(this).val();
        $.getJSON("/user/selname",{"userAccount":name},function (data) {
            if(data.selname=="yes"){
                document.getElementById("yes").style.display = "none";
                document.getElementById("sub").style.display = "block";
                document.getElementById("sub").style.marginLeft = "-2px"
                $("#img").attr("src",data.img);
                document.getElementById("take").click();
                document.getElementById("que").click();
            }else{
                alert("用户名不存在，请重新输入")
                $("[name=img]").val("");
            }
        })
    })


    //下面的代码是保存canvas标签里的图片并且将其按一定的规则重命名
    var type = 'png';

    var _fixType = function(type) {
        type = type.toLowerCase().replace(/jpg/i, 'jpeg');
        var r = type.match(/png|jpeg|bmp|gif/)[0];
        return 'image/' + r;
    };
    /**
     * @param  {String} filename 文件名
     */
    var saveFile = function(filename){
        //获取canvas标签里的图片内容
        var imgData = document.getElementById('canvas').toDataURL(type);
        imgData = imgData.replace(_fixType(type),'image/octet-stream');

        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        save_link.href = imgData;
        save_link.download = filename;

        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        save_link.dispatchEvent(event);
    };

    // 下载后的文件名规则
    var filename = (new Date()).getTime() + '.' + type;

    $(function () {
        $("#sub").click(function () {
            alert(filename);
            var img=$("#img").attr("src");
            var name=$("[name=img]").val();
            alert(img);
            $.getJSON("/user/photos",{"photos":filename,"img":img},function (data) {
                if(data.photo=="yes"){
                    alert("刷脸成功");
                    $("#username").attr("value",data.usernames);
                    $("#pwds").attr("value",data.pwd);
                    var username=$("[name=username]").val();
                    var pwd=$("[name=password]").val();
                    document.getElementById("logining").click();
                }else{
                    alert("刷脸失败,你太丑了");
                }
            })
        })
    })
</script>
</body>
</html>